{% extends 'base.html' %}
{% load crispy_forms_tags %}
{% block title %}
    发布活动
{% endblock %}
{% block header_name %}
    发布活动
{% endblock %}
{% block css %}
    <link href="https://cdn.bootcss.com/jquery-datetimepicker/2.5.20/jquery.datetimepicker.min.css" rel="stylesheet">
  <style>
  #loading {
    position: fixed;
    z-index: 400;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0%;
    text-align: center;
    font-size: 0.9rem;
    color: #595758;
    background-color: black;
}

  </style>
{% endblock %}
{% block body %}
      <!-- Breadcrumb-->
    <div class="breadcrumb-holder container-fluid">
    <ul class="breadcrumb">
      <li class="breadcrumb-item"><a href="{% url 'index' %}">首页</a></li>
      <li class="breadcrumb-item"><a href="{% url 'activities:activities' %}">活动管理</a></li>
      <li class="breadcrumb-item active">发布活动</li>
    </ul>
    </div>

  <br>

  <div class="container">
    <div class="row">
      <div class="col-md-8 offset-md-2">
        <form id="activity_form" action="{% url 'activities:activity_create' %}" method="post" enctype="multipart/form-data">
          {% csrf_token %}
          {{ form|crispy }}
          {{ form.media }}
          <div class="form-group">
            <label for="select_academy">选择学院*</label>
            <select name="academy" id="select_academy" class="form-control" onchange="academyChange()">
              <option selected value="0">请选择</option>
              {% for academy in academies %}
                <option value="{{ academy.pk }}">{{ academy.name }}</option>
              {% endfor %}
            </select>
          </div>

          <div class="form-group">
            <label for="select_to">选择审核者*</label>
            <select name="to" id="select_to" class="form-control">
              <option value="0">请先选择学院</option>
          </select>
          </div>

        </form>
        <div class="form-group">
          <button type="submit" class="btn btn-primary btn-lg pull-right" id="button-activity">发布活动</button>
        </div>
      </div>

    </div>
  <br><br>
  </div>

{% endblock %}

{% block js %}
  <script src="https://cdn.bootcss.com/jquery-datetimepicker/2.5.20/jquery.datetimepicker.full.min.js"></script>
  <script>
    $(function() {

        $('#button-activity').click(function () {
            if ($('#select_to').val() === "0" || !$('#select_to').val()) {
                alert("请选择审核者！");
                return;
            }
            $('#activity_form').submit();
        });

        $('#select_academy').change(function () {
            var id = $(this).val();
            $.ajax({
                url: "/activities/get-admins/",
                cache: false,
                data: {
                    id
                },
                method: "POST",
                success: res => {
                    if (res.status === "ok") {
                        $('#select_to').children().remove()
                        for (let key of Object.keys(res.admin_dict)) {
                            let name = res.admin_dict[key];
                            $('#select_to').append(`<option value='${key}'>${name}</option>`);
                        }

                    } else {
                        alert("获取失败！")
                    }

                }
            })
        })
        datetimepickerComponent();

        function datetimepickerComponent(){
            $.datetimepicker.setLocale('zh');
            params = {
                lang: 'zh',
                format: 'Y-m-d H:i',//格式化显示
            };
            $('#id_deadline').datetimepicker(params);
            $('#id_time').datetimepicker(params);

        };

        $('#id_logo').removeClass('custom-file-input form-control')
            .parent().removeClass('custom-file')
        $('#id_file').removeClass('custom-file-input form-control')
            .parent().removeClass('custom-file')
        $('.custom-file-label').hide()
    })
  </script>
{% endblock %}
